<?php
/**
 * @version     kingadmin-v1.2-tx
 * @package     tpl_gpcb
 * @copyright   Copyright (C) 2014. All Rights Reserved
 * @license     Creative Commons Attribution-NoDerivatives 4.0 International License
 * @author      caballeroantonio <caballeroantonio@hotmail.com> - http://caballeroantonio.com
 */

// No direct access
defined('_JEXEC') or die;

$kbpath = 'templates/gpcb';
$this->document->page_class = 'demo-maps';
?>

							<div class="main-header">
								<h2>Maps</h2>
								<em>dynamic and interactive vector map</em>
							</div>

							<div class="main-content">
								<!-- WIDGET BASIC MAP -->
								<div class="widget">
									<div class="widget-header"><h3><i class="fa fa-globe"></i> Basic Map</h3> <em> - world map with no options</em></div>
									<div class="widget-content">
										<div class="basic-map"><div class="map"></div></div>
									</div>
								</div>
								<!-- END WIDGET BASIC MAP -->

								<!-- WIDGET SALES MAP -->
								<div class="widget">
									<div class="widget-header"><h3><i class="fa fa-globe"></i> Sales Data Visualization</h3> <em> - data visualization map, easy to setup</em></div>
									<div class="widget-content">
										<div class="data-visualization-map">
											<div class="row">
												<div class="col-md-9"><div class="map"></div></div>
												<div class="col-md-3">
													<div class="areaLegend legend-right"></div>
													<em>Click the text legend to see interactivity in action.</em>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- END WIDGET SALES MAP -->

								<div class="row">
									<div class="col-md-6">
										<!-- WIDGET PLOTTABBLE MAP -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-globe"></i> US Sales Map</h3> <em> - US map with plottable latitude and longitude</em></div>
											<div class="widget-content">
												<div class="data-us-map">
													<div class="map"></div>
													<div class="plotLegend"></div>
												</div>
											</div>
										</div>
										<!-- END WIDGET PLOTTABBLE MAP -->
									</div>
									<div class="col-md-6">
										<!-- WIDGET ZOOM MAP -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-search-plus"></i> Zoom</h3> <em> - Map with zoom features, you can also use mouse wheel to control it.</em></div>
											<div class="widget-content">
												<div class="zoom-map">
													<div class="btn-group btn-group-sm pull-right">
														<button class="btn btn-info" id="focus-paris"><i class="fa fa-map-marker"></i> Focus on Paris Area</button>
														<button class="btn btn-info" id="focus-lyon"><i class="fa fa-map-marker"></i> Focus on Lyon Area</button>
														<button class="btn btn-danger" id="map-clear-zoom"><i class="fa fa-times-circle"></i> Clear Zoom</button>
													</div>
													<div class="map"></div>
												</div>
											</div>
										</div>
										<!-- END WIDGET ZOOM MAP -->
									</div>
								</div>
							</div><!-- /main-content -->
						

	<!-- Javascript -->


	
	<script src="<?= $kbpath ?>/assets/js/raphael-min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/jquery.mapael.js"></script>
	<script src="<?= $kbpath ?>/assets/js/maps/world_countries.js"></script>
	<script src="<?= $kbpath ?>/assets/js/maps/usa_states.js"></script>
	<script src="<?= $kbpath ?>/assets/js/maps/france_departments.js"></script>
	<script src="<?= $kbpath ?>/assets/js/jquery.mousewheel.js"></script>
	<script src="<?= $kbpath ?>/assets/js/king-components.js"></script>
